﻿@model PTop.Web.Areas.Questionnaire.Models.QnStatisticsModel
@{
    Layout = null;
    var questOptions = Model.QnQuestion.GetOptions();
    var aswOptions = Model.GetOptions();
    var dataList = new List<string>();
    for (var i = 0; i < questOptions.Length; i++)
    {
        var quest = questOptions[i];
        var asw = aswOptions[i];
        var da = string.Format("['{0}', {1}]", quest, asw);
        dataList.Add(da);
    }
    var data = string.Join(",", dataList);
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@Model.F_Question</title>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="~/Content/js/highcharts/highcharts.js"></script>
    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '@Model.F_Question'
                },
                subtitle: {
                    text: '@Model.F_PaperTitle'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '比例：',
                    data: [@Html.Raw(data)]
                }],
            });
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
